<template>
  <div>
    <TableList v-loading="loading" :tabel-data="TableData" :table-head="TableHead" :row-handle-but="RowHandleBut" :pagination="false" :list-query="ListQuery" :selection="false" :limit-width="false" @choiceRow="choiceRow">
      <el-form ref="dialogForm" :model="temp" :rules="rules" label-width="80px" label-position="left">

        <!--银行选择-->
        <template v-if="type == 'bank'">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="银行" label-width="40px" prop="">
                <el-select v-model="ListQuery['bankId']" style="width: 100%" filterable placeholder="请选择">
                  <el-option
                    v-for="item in bankOptions"
                    :key="item.BANK_ID"
                    :label="item.BANK_NAME"
                    :value="item.BANK_ID"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址" label-width="40px" prop="">
                <el-input v-model="ListQuery['keyword']" style="width: 100%" placeholder="请输入内容" clearable @keyup.enter.native="selectType"/>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-row type="flex" justify="end" style="margin-bottom: 20px;">
          <el-col :span="2">
            <el-button type="primary" @click="selectType">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </TableList>
  </div>
</template>

<script>
import TableList from 'components/TableList'
import axios from 'axios'
import { zBankCloudwalletBankNoquery } from 'api/common'

export default {
  name: 'SearchDialogs',
  components: {
    TableList
  },
  props: {
    type: {
      default: 'bank'
    }
  },
  data() {
    return {
      loading: false,
      TableData: [],
      TableHead: [
        {
          label: '银行编码',
          field: 'bank_id'
        },
        {
          label: '联行号',
          field: 'bank_no'
        },
        {
          label: '联行号银行所在地',
          field: 'open_bank_add'
        },
        {
          label: '支行名称',
          field: 'branch_name'
        }
      ],
      RowHandleBut: [
        {
          butValue: '选择',
          butEvent: 'choiceRow',
          type: 'primary'
        }
      ],
      ListQuery: {
        /* pageNumber: 1,
        pageSize: 5,
        sizes: 5*/
      },
      total: 0,
      bankOptions: [],
      temp: {},
      rules: {}
    }
  },
  created() {
    // this.selectType()
    this._enterpriseIndustry()
  },
  methods: {

    // 判断选中的类型
    selectType() {
      // this.loading = true
      var type = this.type
      // this.ListQuery.pageNumber = 1
      this._switch(type)
    },

    // 统一判断
    _switch(type) {
      var self = this
      switch (type) {
        case 'bank': // 选择银行
          self._getBankList()
          break
      }
    },

    // 银行列表
    _getBankList() {
      zBankCloudwalletBankNoquery(this.ListQuery).then(response => {
        var bankList = response.data.data.bankList
        this.TableData = bankList
        // this.loading = false
      })
    },

    // 获取所有银行
    _enterpriseIndustry() {
      this.GlobalData.bankFun().then(res => {
        debugger
        this.bankOptions = res
      })
    },

    // 弹框列表 选着某一条返回的数据
    choiceRow(rowData) {
      var data = {}
      Object.assign(data, rowData)
      var self = this
      this.bankOptions.some((item) => {
        if (item.BANK_ID === this.ListQuery.bankId) {
          data['relBankName'] = item.BANK_NAME
          return
        }
      })
      self.$emit('choiceRow', data)
    },
    // 弹框 分页组件事件
    dHandleSizeChange(val) {
      var self = this
      this.ListQuery.pageSize = val
      this._switch(self.type)
    },
    // 弹框 分页组件事件
    dHandleCurrentChange(val) {
      var self = this
      this.ListQuery.pageNumber = val
      this._switch(self.type)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
